<div class="pad-def bg-default bor-b-def">
  <h2 class="no-margin">课程管理</h2>
</div>
<div>
  <div class="wrapper-md bg-white">
    <form class="form-horizontal over-hide clearfix pad-def  bor-def mar-b-def">

      <div class="clearfix">
        <div class="form-group col-lg-4 col-sm-6 col-xs-12">
          <label class="control-label col-xs-12 col-sm-3">专业：</label>
          <p class="col-xs-12 col-sm-9 ">
            <select class="form-control" [(ngModel)]="searchParams.majorId" name="majorId">
              <option value="{{major.majorId}}" *ngFor="let major of majorOptions">{{major.major}}</option>
            </select>
          </p>
        </div>
        <div class="form-group col-lg-4 col-sm-6 col-xs-12">
          <label class="control-label col-xs-12 col-sm-3"
          >年级：</label>
          <p class="col-xs-12 col-sm-9">
            <select class="form-control" [(ngModel)]="searchParams.gradeId" name="grade">
              <option value="{{grade.gradeId}}" *ngFor="let grade of gradeOptions">{{grade.name}}</option>
            </select>
          </p>
        </div>
      </div>
      <div class="clearfix">
        <div class="form-group col-lg-4 col-sm-6 col-xs-12">
          <label class="control-label col-xs-12 col-sm-3">课程名称：</label>
          <p class="col-xs-12 col-sm-9 ">
            <input class="form-control" [(ngModel)]="searchParams.courseName" name="courseId" placeholder="课程名称"/>
          </p>
        </div>
        <div class="form-group col-lg-4 col-sm-6 col-xs-12">
          <p class="col-xs-12 col-lg-9 col-sm-offset-3">
            <button class="btn btn-primary" (click)="search()">搜索</button>
            <button class="btn btn-default" (click)="resetParams()">重置</button>
          </p>
        </div>
      </div>
    </form>

    <p-dataTable #dt [value]="tableData"  scrollHeight="200px" emptyMessage="暂无数据" >
      <p-header>
        <div class="ui-helper-clearfix text-left">
          <a class="btn btn-sm btn-info pull-left" (click)="showAddModal()"><i class="fa fa-plus-square" ></i>新增课程</a>
          <a class="btn btn-sm btn-info pull-right" (click)="dt.exportCSV()" ><i class="fa fa-file-o"></i>导出CSV</a>
        </div>
      </p-header>
      <p-column field="courseId" header="id"></p-column>
      <p-column field="courseName" header="课程名称"></p-column>
      <p-column field="gradeName" header="年级"></p-column>
      <p-column field="major" header="专业"></p-column>
      <p-column styleClass="col-button text-center">
        <ng-template pTemplate="header">
          操作
        </ng-template>
        <ng-template  let-course="rowData" pTemplate="body">
          <div class="btn-group" style="min-width: 200px">
            <button type="button" class="btn btn-xs btn-primary " (click)="showEditModal(course)">编辑</button>
            <button type="button" class="btn btn-xs btn-danger " (click)="remove(course.courseId)">删除</button>
          </div>
        </ng-template>
      </p-column>
      <p-footer>
        <paginator *ngIf="page.count" [(index)]="page.pageIndex" [(pageSize)]="page.pageSize" [count]="page.count" size="sm" (onChangePage)="query()"></paginator>
      </p-footer>
    </p-dataTable>


    </div>
</div>
<modal [(visible)]="modalAdd.visible">
  <modal-header>添加课程</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">课程名称：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="课程名称" [(ngModel)]="modalAdd.data.courseName" name="courseName" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">年级：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalAdd.data.gradeId" name="gradeId">
            <option *ngFor="let grade of modalAdd.gradeOptions" [value]="grade.gradeId">{{grade.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">专业：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalAdd.data.majorId" name="majorId">
            <option *ngFor="let major of modalAdd.majorOptions" [value]="major.majorId">{{major.major}}</option>
          </select>
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalAdd.submitted" (click)="add()">{{modalAdd.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeAddModal()">取消</button>
  </modal-footer>
</modal>
<modal [(visible)]="modalEdit.visible">
  <modal-header>修改课程</modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">课程名称：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="课程名称" [(ngModel)]="modalEdit.data.courseName" name="courseName" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">年级：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalEdit.data.gradeId" name="gradeId">
            <option *ngFor="let grade of modalEdit.gradeOptions" [value]="grade.gradeId">{{grade.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">专业：</label>
        <div class="col-sm-9">
          <select class="form-control" [(ngModel)]="modalEdit.data.majorId" name="majorId">
            <option *ngFor="let major of modalEdit.majorOptions" [value]="major.majorId">{{major.major}}</option>
          </select>
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" [disabled]="modalEdit.submitted" (click)="update()">{{modalEdit.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeEditModal()">取消</button>
  </modal-footer>
</modal>
